Dynamic Form Creation

The Dynamic Form feature in Digisquares allows users to create and manage customizable forms that can be tailored to specific use cases. Whether for capturing user input, designing questionnaires, or collecting structured data, the Dynamic Form tool provides a powerful, flexible interface for building forms with ease.

Overview of the Dynamic Form Interface

Upon accessing the Dynamic Form section, users are presented with a clean and intuitive interface that makes it simple to design forms. The layout allows users to choose between different column configurations (single, two, three, or four columns) and then drag and drop form elements to build the desired structure.

Key Features of the Dynamic Form Interface

• Select Column Layout: Choose from column layouts like Single Column, Two Columns, Three Columns, or Four Columns based on how you want your form fields to appear. This ensures flexibility in form design and layout.

• Form Elements: A variety of form elements can be added to the form, including:

  • Text Input
  • Password Field
  • Radio Buttons
  • Checkboxes
  • Select Dropdown
  • Date Picker
  • Time Picker
  • Upload Field
  • And more...

• Adding Form Fields

  1. Locate the Field Selection Panel on the right side.
  2. Drag and drop the required fields into the form canvas.

  Field Categories & Use Cases:

  • Basic Input Fields (For user text entries)

    Field Name	Purpose	Example Use Case
    Text Input	Single-line input	Name, Email, Phone Number
    Text Area	Multi-line input	Address, Description
    Password Field	Secure input field	Login & Signup Forms
    Number Input	Only allows numeric values	Age, Quantity, Price

  • Date & Time Fields (For selecting date & time)

    Field Name	Purpose	Example Use Case
    Date Picker	Select a single date	Birthdate, Booking Date
    Date Range Picker	Select a start & end date	Leave Request, Event Duration

  • Selection Fields (For predefined options)

    Field Name	Purpose	Example Use Case
    Dropdown Select	Choose one option from a list	Country, Payment Method
    Multi-Select Dropdown	Choose multiple options	Skills, Interests
    Radio Buttons	Select one option from a group	Gender, Subscription Plan
    Checkboxes	Select multiple options	Preferences, Interests

  • File & Media Upload Fields (For uploading documents)

    Field Name	Purpose	Example Use Case
    File Upload	Upload any document/file	Resume, Proof of Identity
    Image Upload	Upload images	Profile Picture, Product Image
    Signature Pad	Capture a digital signature	Agreements, E-Signatures

  • Interactive & Toggle Fields (For user choices)

    Field Name	Purpose	Example Use Case
    Switch Toggle	Enable/disable an option	Notifications, Dark Mode
    Slider	Select a value in a range	Rating, Budget Estimation
    Rating	Provide a rating (stars/numbers)	Feedback, Product Reviews

---

• Field Properties: Each form field has customizable properties such as labels, alignment, placeholders, and whether the field is required.

Creating a New Form

Step 1: Select Layout

The first step in form creation is selecting the Column Layout. This is done through the dropdown menu in the interface where you can choose:

• Single Column
• Two Columns
• Three Columns
• Four Columns

Step 2: Add Form Fields

Once you've chosen the layout, you can drag and drop form fields from the available options into the form. For example, the Input Field can be selected and placed in the form.

Step 3: Customize Field Properties

Each field can be customized by setting properties such as:

• Label: Define the text that appears next to the input field.
• Alignment: Align the label and the field (left or top).
• Placeholder: Define placeholder text that appears inside the input field.
• Required: Toggle to mark the field as required for form submission.

Step 4: Save Form

Once you've designed your form, click Save to save the form.

Configuring Form Submit Action

The Form Submit action allows users to configure how form data is processed after submission. You can link form fields to specific queries and connect them to the database or API for data storage or processing.

Step 1: Configure Connection and Query

To set up the form submission:

1. Select the Connection to the database or external service.
2. Choose the Query Type (such as INSERT or UPDATE).
3. Select the Query that should run when the form is submitted.

Step 2: Define Query and Column Mapping

• Select the Column from the form (such as Input, Password, etc.) that should correspond to the query field.
• Map each form field to the appropriate query column for successful data insertion or processing.

Step 3: Save Configuration

Click OK to save the form submit configuration.

Creating Form Pages

Users can create a Form Page that includes metadata such as the form name and description. This is useful for organizing different forms and giving them context.

Step 1: Enter Form Details

• Name: Define the name of the form page.
• Description: Provide a description that explains the purpose or context of the form.

Step 2: Save Form Page

Click OK to save the form page.

Example Form (Register Form)

Here's an example of a Register Form:

1. Mobile Number: A text input for capturing the user's mobile number.
2. Password: A password field for entering a secure password.

This form is designed using the Two Columns layout, where the Mobile Number field and Password field are placed side by side.

Best Practices for Form Creation

• Field Organization: Group related fields together for better clarity (e.g., contact information, address details).
• Input Validation: Use form properties like the Required flag and input patterns to ensure data quality.
• Testing: Preview your form before saving to ensure the layout and functionality work as expected.
• Database Integration: Ensure that each form field is correctly mapped to the database or query columns for seamless data submission.

---

tip

The Dynamic Form feature is a powerful tool for creating forms that can be customized based on specific project needs. Make sure to test forms thoroughly and use the correct query and column mappings to ensure smooth data processing.